<template>
	<view class="container row">
		<view class="nav-tab" :style="{height:winHeight}">
			<scroll-view  scroll-y="true" class="scroll-Y" :style="{height:winHeight}">
				<view class="" v-for="(item,index) in mallList" :key="index">
					<view  :class="['tab-item',current == item.id ? 'tab-active':'']" @click="changeTab(item.id)">
						{{item.name}}
					</view>
				</view>			
			<!-- 	<view :class="['tab-item',current == 1 ? 'tab-active':'']" @click="changeTab(1)">
					床
				</view>
				<view :class="['tab-item',current == 2 ? 'tab-active':'']" @click="changeTab(2)">
					空调
				</view>
				<view :class="['tab-item',current == 3 ? 'tab-active':'']" @click="changeTab(3)">
					挖掘机
				</view> -->
			</scroll-view>
		</view>
		<scroll-view  scroll-y="true" class="scroll-Y" :style="{height:winHeight}">
		  <view class="no-data" v-if="newsList.length == 0">
		  	暂无相关商品
		  </view>
			<view class="box" v-else>
		  	<view class="news-item row" v-for="(item,index) in newsList" :key="index" @click="toDetail(item.id)">
		  		<image :src="item.imgLogo" mode="" class="left"></image>
		  		<view class="right column">
		  			<text class="title">{{item.name}}</text>
		  			<text class="time">规格：{{item.specificationName}}</text>
		  			<text class="time">剩余数量：{{item.stock}}</text>
		  		</view>
		  	</view>
		  </view>             
		</scroll-view>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		data() {
			return {
				winHeight:"",
				current: null,
				mallList:[],
				newsList: []
			};
		},
		onLoad(){
			var that = this;
			uni.getSystemInfo({
							success(res) {
								that.winHeight = res.windowHeight +'px'
								console.log(res.windowHeight) //窗口高度
							}
						});	
			console.log("that.winHeight",that.winHeight)
		},
		onShow(){
			this.getData()
		},
		methods: {
			getData(){
				let data = {}
				comm.request("POST","/app/goods/classificationList",data,(res,data)=>{
					console.log("商城分类",res)
					if(res.data.ret_code == 200){
						this.current = data[0].id
						this.mallList = data
						this.getList(data[0].id)
					}				
				})
			},
			getList(id){
				let data = {current:1,id:id}
				comm.request("POST","/app/goods/goodsList",data,(res,data)=>{
					console.log("商品列表",res)
					if(res.data.ret_code == 200){						
						this.newsList = data					
					}				
				})
			},
			changeTab(e) {
				this.current = e
				this.getList(e)
			},
			toDetail(e){
				comm.navigateTo(r.goodsDetail+"?id="+e )
			}
		}
	}
</script>

<style lang="less">
	.container{
		align-items: flex-start;
	}
	.nav-tab {
		width:180rpx ;
		height: 100%;;
		box-sizing: border-box;
		justify-content: space-between;
		background: #F3F3F3;

		.tab-item {
			font-size: 28rpx;
			color: #666666;
			padding: 40rpx 0;
			text-align: center;
		}

		.tab-active {
			background: rgba(255, 255, 255, 1);
			text-align: center;
			color: #333333;
			font-size: 30rpx;
			font-weight:bold;
			position: relative;
		}
		.tab-active::before{
			content: '';
			display: block;
			position: absolute;
			width:6rpx;
			height:24rpx;
			background:rgba(219,48,18,1);
			border-radius:4rpx;
			top:50%;
			margin-top: -12rpx;
			left:0;
		}
	}

	.box {
		padding: 0 15px;

		.news-item {
			padding: 15px 0;
			;
			justify-content: space-between;
			align-items: flex-start;

			.left {
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
			}

			.right {
				flex: 1;
				justify-content: space-between;
				align-content: space-between;
				align-items: flex-start;

				.title {
					color: #323332;
					font-size: 14px;
					font-weight: bold;
					word-break: break-all;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.time {
					font-size: 22rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}

		
	}
</style>
